
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0px;padding: 0px}
        .pic{width: 400px;height: 500px;margin: 0 auto;position: relative;}
        .pic p{position: absolute;top:0px;}
        .pic span{position: absolute;
            bottom:0px;left: 0px;}
        .pic span,.pic p{width: 400px;height: 30px;text-align: center;line-height: 30px;background: #000;color: #fff;}
        ul{width:200px;height: 40px; position: absolute;bottom: 40px;left: 50%;margin-left: -100px;}
        ul li{list-style: none;}
        ul li{width: 40px;height: 40px;background: #666;margin-right: 10px;float: left;}
        ul .active{background: orange;}
    </style>
    <script>
        window.onload = function () {
            var img = document.getElementsByTagName("img")[0];
            var p = document.getElementsByTagName("p")[0];
            var span = document.getElementsByTagName("span")[0];
            var oUl = document.getElementsByTagName("ul")[0];
            var OLi = document.getElementsByTagName("li");
            var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
            var title = ["美女1","美女2","美女3","美女4"];
            var num = 0
            //添加li
            for(var i = 0; i < imgs.length;i++){
                oUl.innerHTML = oUl.innerHTML + "<li></li>"
            }
//            changeImg();
            changeIm(0);
            //给li添加点击事件
            for(var j = 0;j < OLi.length;j++){
                //添加索引值
                OLi[j].index = j;
                OLi[j].onclick = function () {
                 num = this.index;
//                 changeImg();

                    changeIm(this.index);
                }
            }


            function  changeImg() {
                for(var k = 0;k < OLi.length;k++){
                    OLi[k].className = "";
                }
                OLi[num].className = "active";
                img.src = imgs[num];
                span.innerHTML = title[num];
                p.innerHTML = num +1 +"/"+ imgs.length;
            }

            function changeIm(index) {
                for(var k = 0;k < OLi.length;k++){
                    OLi[k].className = "";
                }
                OLi[index].className = "active";
                img.src = imgs[index];
                span.innerHTML = title[index];
                p.innerHTML = index +1 +"/"+ imgs.length;
            }
        }
    </script>
</head>
<body>
<div class="pic">
    <img src="" alt="" width="400px" height="500px">
    <p>图片数量正在加载中...</p>
    <span class="">图片名称正在加载...</span>
    <ul>

    </ul>
</div>

</body>
</html>